<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>竞品分析</title>

  <script src="/jquery.js"></script>
  <script type="text/javascript" src="/static/js/jquery.form.js"></script>


  <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap.min.css"
    integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
  <link rel="stylesheet" href="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css"
    integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  <script src="/static/bootstrap-3.4.1-dist/bootstrap-3.4.1-dist/js/bootstrap.min.js"
    integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
    crossorigin="anonymous"></script>

  <script src="/md5.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.2/src/httpVueLoader.min.js"></script>
  <!-- UIkit CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.7.2/dist/css/uikit.min.css" />

  <!-- UIkit JS -->
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.7.2/dist/js/uikit.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/uikit@3.7.2/dist/js/uikit-icons.min.js"></script>
  <!-- 引入样式 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
  <!-- 引入组件库 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
  <script src="/axios.js"></script>

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      min-width: 1200px;
    }

    .page-header {
      height: 50px;
    }

    .panel {
      margin-top: 200px;
      height: 648px;
      width: 1200px;
      margin: 0 auto;
    }

    .panel-heading {
      height: 23%;
      padding: 3px;
    }

    .panel-body {
      height: 73%;
      padding: 3px
    }

    .table-bordered>tbody>tr>th,
    .table-bordered>tbody>tr>td {
      border: solid 1px rgb(102, 160, 207);
      vertical-align: middle;
    }

    .table-bordered>tbody>tr>th {
      font-size: 17px;
    }

    .table-bordered>tbody>tr>td {
      font-size: 15px;
    }

    img {
      max-height: 429px;
    }

    .el-drawer__wrapper {
      width: 15%;
      text-align: center;
    }

    input[name="title"] {
      float: left;
      border: 0;
      height: 30px;
      font-size: 25px;
    }

    input[name="title"]:focus {
      outline: none;
    }

    th input,
    td input {
      border: 0;
      font-size: 15px;
      background-color: transparent;
    }

    th input:focus {
      outline: none;
    }

    td input:focus {
      outline: none;
    }

    .el-upload {
      margin: 0 auto;
      margin-top: 10px;
    }

    #myModal {
      height: 300px;
    }
  </style>
</head>

<body>
  <div id="main" style="width: 100%;height: 120%;">

    <div class="page-header">
      <sidebar @changepage="changepage" ref="mysidebar"></sidebar>
      <input name="title" placeholder="请输入标题" @change="autosave" :value="info.title" />

      <span style="float: right; margin-right:5%">
        <button class="btn btn-danger" type="button" @click="deletePage"><span
            class="glyphicon glyphicon-trash"></span></button>
        <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-menu-down"
            @click="addtonext">新建下一页</span></button>
        <button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-plus"
            @click="addtoend">新增到尾部</span></button>
        <button class="btn btn-default" type="button" @click="showlast"><span
            class="glyphicon glyphicon-chevron-left"></span></button>
        <button class="btn btn-default" type="button" @click="shownext"><span
            class="glyphicon glyphicon-chevron-right"></span></button>
        <el-tooltip class="item" effect="dark" content="导出" placement="top">
          <button class="btn btn-primary" type="button" @click="export_pptx"><span
              class="glyphicon glyphicon-export"></span></button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="保存" placement="top">
          <button class="btn btn-primary" type="button" @click="save"><span
              class="glyphicon glyphicon-floppy-save"></span></button>
        </el-tooltip>
        <a v-if="isppt" :href="task_name+'/download'">PPTX</a>
      </span>

    </div>

    <div class="panel panel-default">
      <div class="panel-heading">
        <table id="mytable" class="table table-striped table-bordered" style="height: 100%;margin:0">
          <tbody>
            <tr style="height:50%;background-color:rgb(224, 236, 245)">
              <th style="width: 7%;" data-toggle="modal" data-target="#myModal">指标</th>
              <td style="width: 42%;" name="target" data-toggle="modal" data-target="#myModal">
                {{info.target}}</td>
              <th style="width: 7%;">优先级</th>
              <td style="width: 11%;" name="p">
                <span class="glyphicon glyphicon-star"></span>
                <span class="glyphicon glyphicon-star" v-if="info.p!=='低'"></span>
                <span class="glyphicon glyphicon-star-empty" v-else></span>
                <span class="glyphicon glyphicon-star" v-if="info.p==='高'"></span>
                <span class="glyphicon glyphicon-star-empty" v-else></span>
              </td>
              <th style="width: 12%;">问题类型</th>
              <td style="width: 20%;" name="t">{{info.t}}</td>
            </tr>
            <tr style="height:50%;background-color:rgb(193, 216, 235)">
              <th>问题</th>
              <td colspan="2"><input name="problem" placeholder="输入问题" @change="autosave" :value="info.problem"
                  style="width:100%" /></td>
              <th>建议</th>
              <td colspan="2"><input name="advice" placeholder="输入建议" @change="autosave" :value="info.advice"
                  style="width:100%" /></td>
            </tr>

          </tbody>
        </table>
      </div>
      <div class="panel-body">
        <table style="height: 100%;width: 100%;" class="table table-bordered">
          <thead style="height: 10%;">
            <tr>
              <th style="border: solid 1px white;width: 20%;background-color: rgb(204, 102, 0);color: white;">
                <input id="img-title0" placeholder="输入名称" :value="info.pics[0].title" @change="autosave"
                  style="width:100%" />
              </th>
              <th style="border: solid 1px white;width: 20%;background-color: rgb(14, 108, 141);color: white;">
                同业参考：<input id="img-title1" :value="info.pics[1].title" @change="autosave" style="width:50%" /></th>
              <th style="border: solid 1px white;width: 20%;background-color: rgb(14, 108, 141);color: white;">
                同业参考：<input id="img-title2" :value="info.pics[2].title" @change="autosave" style="width:50%" /></th>
              <th style="border: solid 1px white;width: 20%;background-color: rgb(14, 108, 141);color: white;">
                同业参考：<input id="img-title3" :value="info.pics[3].title" @change="autosave" style="width:50%" /></th>
              <th style="border: solid 1px white;width: 20%;background-color: rgb(14, 108, 141);color: white;">
                同业参考：<input id="img-title4" :value="info.pics[4].title" @change="autosave" style="width:50%" /></th>
            </tr>
          </thead>
          <tbody style="height: 90%;">
            <tr style="height:100%;">
              <td style="height:100%;border: solid 1px white;">
                <el-image id="img0" @change="autosave"
                  :src="info.pics[0].path.slice(0,5)=='blob:'?info.pics[0].path:(info.pics[0].path==''?'':('/'+info.pics[0].path))"
                  :preview-src-list="[info.pics[0].path==''?'':('/'+info.pics[0].path)]"></el-image>
              </td>
              <td style=" height:100%;border: solid 1px white;">
                <el-image id="img1" @change="autosave"
                  :src="info.pics[1].path.slice(0,5)=='blob:'?info.pics[1].path:(info.pics[1].path==''?'':('/'+info.pics[1].path))"
                  :preview-src-list="[info.pics[1].path==''?'':('/'+info.pics[1].path)]"></el-image>
              </td>
              <td style=" height:100%;border: solid 1px white;">
                <el-image id="img2" @change="autosave"
                  :src="info.pics[2].path.slice(0,5)=='blob:'?info.pics[2].path:(info.pics[2].path==''?'':('/'+info.pics[2].path))"
                  :preview-src-list="[info.pics[2].path==''?'':('/'+info.pics[2].path)]"></el-image>
              </td>
              <td style=" height:100%;border: solid 1px white;">
                <el-image id="img3" @change="autosave"
                  :src="info.pics[3].path.slice(0,5)=='blob:'?info.pics[3].path:(info.pics[3].path==''?'':('/'+info.pics[3].path))"
                  :preview-src-list="[info.pics[3].path==''?'':('/'+info.pics[3].path)]"></el-image>
              </td>
              <td style=" height:100%;border: solid 1px white;">
                <el-image id="img4" @change="autosave"
                  :src="info.pics[4].path.slice(0,5)=='blob:'?info.pics[4].path:(info.pics[4].path==''?'':('/'+info.pics[4].path))"
                  :preview-src-list="[info.pics[4].path==''?'':('/'+info.pics[4].path)]"></el-image>
              </td>
            </tr>
          </tbody>
        </table>
        <div id=" imgsel" class="well well-lg" style="position: relative; top:20px;height:100px;padding: 10px;">
          <div style="width: 20%;height:150px;display: inline;float: left;">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span></el-button>
          </div>
          <div style="width: 20%;display: inline;float: left;">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span></el-button>
          </div>
          <div style="width: 20%;display: inline;float: left;">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span></el-button>
          </div>
          <div style="width: 20%;display: inline;float: left;">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span></el-button>
          </div>
          <div style="width: 20%;display: inline;float: left;">
            <el-button type="primary" size="small" @click="beforeUpload" circle><span
                class="glyphicon glyphicon-cloud-upload"></span></el-button>
            <el-button type="success" size="small" @click="openBrowser" circle><span
                class="glyphicon glyphicon-folder-open"></span></el-button>
            <el-button type="danger" size="small" @click="dropimg" circle><span
                class="glyphicon glyphicon-trash"></span></el-button>
          </div>
        </div>
      </div>

    </div>

    <!--模态框 选择标签-->
    <div class="modal fade" id="selcontainer" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1">
      <div class="modal-dialog" role="document" style="width: 100%;">
        <div class="modal-content" style="width: 100%;">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel1">请选择</h4>
          </div>
          <div class="modal-body">
            <picupload :page="currentPage" :index="whichtoupload" :type="2" ref="myuploader"></picupload>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" @click="upload">上传</button>
          </div>
        </div>
      </div>
    </div>

    <imgbrowser @choosepic="setpic"></imgbrowser>

  </div>



  </div>


</body>

<script>

  var app = new Vue({
    el: "#main",
    components: {
      "sidebar": httpVueLoader("/sidebar.vue"),
      "imgbrowser": httpVueLoader("/imgbrowser.vue"),
      "picupload": httpVueLoader("/pics.vue")
    },
    data: {
      info: {
        pics: [{ order: 0, path: "" }, { order: 1, path: "" }, { order: 2, path: "" }, { order: 3, path: "" }, { order: 4, path: "" }]
      },
      task_name: null,
      currentPage: 1,
      whichtoupload: 0,
      selvalue: {},
      targetid: "",
      isppt: false
    },
    created: function () {
      this.user = window.location.pathname.split("/")[1];
      this.task_name = window.location.pathname.split("/")[2];
      this.changepage(1);
    },
    methods: {
      chg: function (value) {
        this.targetid = value[1];
        axios.get(`/info?id=${value[1]}`).then((res) => {
          this.$set(this.info, 'target', res.data.target);
          this.$set(this.info, 'p', res.data.p);
          this.$set(this.info, 't', res.data.t);
          $("#myModal").modal('hide');
          this.autosave();
        });
      },
      selimg: function () {
        $('#selimg').modal();
      },
      changepage: function (value) {
        axios.get(`${this.task_name}?type=1&p=${value}`).then(res => {
          let obj = new Object();
          obj.title = res.data.title;
          obj.target = res.data.target;
          obj.problem = res.data.problem;
          obj.advice = res.data.advice;
          obj.pics = res.data.pics;
          obj.pics = [{ order: 0, path: "" }, { order: 1, path: "" }, { order: 2, path: "" }, { order: 3, path: "" }, { order: 4, path: "" }];
          obj.p = "";
          obj.t = "";
          this.targetid = res.data.target;
          if (res.data.target == undefined) {
            return;
          }
          axios.get(`/info?id=${res.data.target}`).then((r) => {
            obj.target = r.data.target;
            obj.p = r.data.p;
            obj.t = r.data.t;
            if (res.data.pics != undefined) {
              for (let pic of res.data.pics) {
                obj.pics[pic.order - 1].path = pic.path;
                obj.pics[pic.order - 1].title = pic.title;
              }
            }
            this.info = obj;
            this.currentPage = value;
          });
        })
      },
      addtoend: function () {
        this.$refs.mysidebar.addtoend();
      },
      addtonext: function () {
        this.$refs.mysidebar.addtonext();
      },
      deletePage: function () {
        this.$confirm('确定要删除吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (this.currentPage > 1) {
            axios.get(`${this.task_name}/deletepage?p=${this.currentPage}`).then(res => {
              this.$refs.mysidebar.get_pages();
              this.changepage(--this.currentPage);
              this.$refs.mysidebar.changeItemColor(this.currentPage);
              this.$message({
                type: 'success',
                message: '删除成功!',
                duration: 2000
              });
            });
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      showlast: function () {
        if (this.currentPage > 1) {
          this.changepage(--this.currentPage);
          this.$refs.mysidebar.changeItemColor(this.currentPage);
        }
      },
      shownext: function () {
        if (this.currentPage < this.$refs.mysidebar.data.length) {
          this.changepage(++this.currentPage);
          this.$refs.mysidebar.changeItemColor(this.currentPage);
        }
      },
      beforeUpload: function (event) {
        $("#selcontainer").modal();
        if (event.target.tagName == 'SPAN') {
          this.whichtoupload = $(event.target).parents('button').index('.el-button--primary')
        }
        else {
          this.whichtoupload = $(event.target).index('.el-button--primary');
        }
      },
      upload: function () {
        this.$refs.myuploader.submitUpload();
        this.info.pics[this.whichtoupload].path = this.$refs.myuploader.fileList[0].url;
      },
      selchange: function (value) {
        this.selvalue.func = value[0];
        this.selvalue.bank = value[1][0];
        this.selvalue.ver = value[1][1];
      },
      autosave: function () {
        $.ajax({
          type: 'POST',
          url: `${this.task_name}/autosave?p=${app.currentPage}&type=1`,
          data: {
            targetid: this.targetid,
            title: $("input[name='title']").val(),
            problem: $("input[name='problem']").val(),
            advice: $("input[name='advice']").val(),
            imgtitle0: $("#img-title0").val(),
            imgpath0: '/' + this.info.pics[0].path,
            imgtitle1: $("#img-title1").val(),
            imgpath1: '/' + this.info.pics[1].path,
            imgtitle2: $("#img-title2").val(),
            imgpath2: '/' + this.info.pics[2].path,
            imgtitle3: $("#img-title3").val(),
            imgpath3: '/' + this.info.pics[3].path,
            imgtitle4: $("#img-title4").val(),
            imgpath4: '/' + this.info.pics[4].path,
          },
          success: function () {
            app.$message({
              type: 'success',
              message: '自动保存',
              duration: 2000
            })
          }
        });
      },
      getpics: function () {

      },
      setpic: function (val) {
        this.info.pics[this.whichtoupload].path = val;
        $("#myModalimgb").modal('hide');
        this.autosave();
      },
      openBrowser: function (event) {
        $("#myModalimgb").modal();
        if (event.target.tagName == 'SPAN') {
          this.whichtoupload = $(event.target).parents('button').index('.el-button--success');
        }
        else {
          this.whichtoupload = $(event.target).index('.el-button--success');
        }
      },
      dropimg: function (event) {
        if (event.target.tagName == 'SPAN') {
          this.whichtoupload = $(event.target).parents('button').index('.el-button--danger');
        }
        else {
          this.whichtoupload = $(event.target).index('.el-button--danger');
        }
        $("#img" + this.whichtoupload).attr('src', '');
        $("#img-title" + this.whichtoupload).val('');
        this.info.pics[this.whichtoupload].path = '';
        this.autosave();
      },
      save: function () {
        this.autosave();
      },
      export_pptx: function () {
        axios.get(`${this.task_name}/export?type=1`).then(res => {
          if (res.data == 1) {
            this.$message({
              message: '导出成功',
              type: 'success'
            });
            this.isppt = true;

          } else {
            this.$message.error('导出失败');
          }
        });
      },
    }
  })

</script>

</html>